<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心-品牌动态</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">
    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
</head>
<style>
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #4a61a6;
        background: #4a61a6;
    }
    
    .el-radio__input.is-checked+.el-radio__label {
        color: #333;
    }
    
    .el-radio__inner:hover {
        border-color: #4a61a6;
    }
    
    .el-button--primary {
        background-color: #4a61a6;
        border-color: #4a61a6;
    }
    
    .el-button--primary:focus,
    .el-button--primary:hover {
        background: #637dcb;
        border-color: #637dcb;
    }
</style>

<body>
    <div class="app-wrap" v-cloak id="pinpai_dongt">
        <header-top></header-top>
        <header-search-global type="首页"></header-search-global>
        <common-top-nav></common-top-nav>
        <div class="bg-gray">
            <div class="container userCenter clear">
                <leftnav></leftnav>
                <div class="user-content">
                    <ul class="tabs">
                        <li class="li-tab" v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="{active:index!=nowIndex}"><span>{{item}}</span></li>
                    </ul>
                    <!-- 品牌形象列表 -->
                    <div class="pinpai-xingx-list" v-if="nowIndex==0">
                        <div class="search-wrap">
                            <input type="text" placeholder="活动名称">
                            <button class="btn">搜索</button>
                        </div>
                        <ul class="list">
                            <li class="head">
                                <span class="col-img"></span>
                                <span class="col-name">品牌形象标题</span>
                                <span class="col-time">添加时间</span>
                                <span class="col-state">状态</span>
                                <span class="col-action">操作</span>
                            </li>
                            <li v-for="item in list">
                                <div class="col-img">
                                    <img src="" width="100px" height="75px">
                                </div>
                                <div class="col-name">{{item.name}}</div>
                                <div class="col-time">{{item.time}}</div>
                                <div class="col-state">{{item.state==1 ? '启用' : '禁用'}}</div>
                                <div class="col-action">
                                    <a href="">修改</a>
                                    <a href="">删除</a>
                                </div>
                            </li>
                        </ul>
                        <common-page :current="1" :all="5"></common-page>
                    </div>

                    <!-- 添加品牌动态 -->
                    <div class="pinpai-xingx-add" v-if="nowIndex==1">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                            <el-form-item label="品牌动态名称" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="动态列表图片" prop="pics">
                                <!-- 上传图片 -->
                                <common-upimg :preimg="ruleForm.pics" :testoption="{ width:100,height:100,volume:40,maxlength:1}"></common-upimg>
                            </el-form-item>
                            <el-form-item label="状态" prop="state">
                                <el-radio-group v-model="ruleForm.state">
                                    <el-radio label="1">启用</el-radio>
                                    <el-radio label="0">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                                <el-button @click="toggleTabs(0)">
                                    < 返回形象列表</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <common-footer></common-footer>
    </div>

    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        pinpai_dongt();
    </script>
</body>

</html>